<template>
    <div>
        <el-main>
            <!--  查询条件封装 -->
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">

                <el-form-item label="用户名">
                    <el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="用户ip">
                    <el-input v-model="searchForm.ipaddr" placeholder="请输入ip地址"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="block">
                        <span class="demonstration">请求时间</span>
                        <el-date-picker v-model="pickTime" type="datetimerange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <el-form size="small">
                <el-form-item label="">
                    <el-button type="primary" plain @click="search">查询</el-button>

                    <el-button type="danger" plain @click="reset">重置</el-button>
                </el-form-item>
            </el-form>

            <!--  表格展示 -->
            <!--  表格展示 -->
            <!--  表格 -->

            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="userId" label="用户ID" align="center">
                </el-table-column>

                <el-table-column prop="username" label="用户名" align="center">
                </el-table-column>

                <!-- 1 -->
                <el-table-column prop="ipaddr" label="登陆ip" align="center">
                </el-table-column>
                <el-table-column prop="userAgent" label="设备信息" align="center">
                </el-table-column>
                <el-table-column label="结果" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status==1">
                            登录成功
                        </el-tag>
                        <el-tag type="danger" v-if="scope.row.status==0">
                            登录失败
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="accessTime" label="时间" align="center">
                </el-table-column>


                <!--  准备删除 -->



                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span style="cursor: pointer; color: #1890ff" class="oper" @click="checkDetail(scope.row)">删除
                        </span>
                        <!-- <span style="color: #1890ff" class="oper"> 下载</span> -->
                        <!-- <span style="color: #1890ff" class="oper" @click="handleDelete(scope.row.fileKey)">
                            删除</span> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页工具栏 -->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-main>
    </div>
</template>
<script>

    import { loginLogApi } from "@/api/loginlog"

    export default {
        created() {
            console.log(

            )
            this.search()
        },
        data() {
            return {
                pickerOptions: [], // 日期组件选项
                tableData: [],
                loading: false,
                pickTime: [], // 选择的时间
                total: 10,
                searchForm: {
                    username: "",
                    pageNum: 1,
                    pageSize: 10,
                    ipaddr: "",
                    beginTime: "", // 开始时间
                    endTime: ""  // 结束时间

                } // 搜索条件
            }
        },

        methods: {

            reset() {
                this.searchForm = {
                    username: "",
                    pageNum: 1,
                    pageSize: 10,
                    ipaddr: "",
                    beginTime: "", // 开始时间
                    endTime: ""  // 结束时间
                }
                this.pickTime = []
                this.search()
            },
            handleCurrentChange(page) {
                this.searchForm.pageNum = page
                this.search()
            },
            handleSizeChange(size) {
                this.searchForm.pageSize = size
                this.search()

            },
            async search() {
                console.log(
                    this.pickTime
                )
                this.searchForm.beginTime = this.pickTime[0]
                this.searchForm.endTime = this.pickTime[1]
                try {
                    this.loading = true
                    let res = await loginLogApi.getLoginLogPage(this.searchForm)
                    this.tableData = res.data.records
                    this.total = res.data.total
                    console.log(res)
                } catch (e) {

                } finally {
                    this.loading = false

                }
            }
        }
    }
</script>
<style scoped>
    /deep/ .has-gutter th {
        background-color: #F2F6FC;
    }
</style>